<template>
  <div class="recordDetails">
    <div class="header">
      <van-nav-bar
        title="详情信息"
        fixed
        left-text="返回"
        right-text
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="recordDetails_con">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <ul>
            <li v-for="(item,index) in initData.list" :key="index">
              <div class="recordDetails_con_head">
                <h4>{{item.buyer_message}}</h4>
                <p class="recordDetails_con_head_span">￥{{item.total_amount}}</p>
                <p class="recordDetails_con_head_span1">{{item.confirm_receipt_time}}</p>
              </div>
              <div class="recordDetails_con_foot">
                <p class="recordDetails_con_foot_title">联系人信息</p>
                <p>姓名：{{item.consigneeName}}</p>
                <p>手机号码：{{item.consigneePhone}}</p>
                <p>期望看房时间：{{item.create_time}}</p>
                <p>备注：到达约定地点后请打电话联系</p>
              </div>
            </li>
          </ul>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "recordDetails",
  data() {
    return {
      product_id: this.$route.query.product_id,
      initData: {},
      initDataList: [],
      isLoading: false,
      loading: false,
      finished: false,
      pageNum:1
    };
  },
  mounted() {
    this.getInitDataList();
  },
  methods: {
    //  返回上一层
    onClickLeft() {
      this.$router.go(-1);
    },
    //初始化数据
    async getInitDataList() {
      let params = {
        pageNum:this.pageNum,
        pageSize:10,
        product_id: this.product_id
      };
      const res = await this.$axios.post(
        this.$api.requestAppointmentMoreInfo,
        params
      );
      if (res.success) {
        if (this.loading) {
          this.initDataList = this.initDataList.concat(res.data.list);
          this.initData = res.data;
          this.initData.list=this.initDataList;
          if(this.initDataList.length>=res.data.total){
            this.finished=true;
          }else{
            this.pageNum++;
          };
        } else {
          if(this.initDataList.length>=res.data.total){
            this.finished=true;
          };
          this.initData = res.data;
        }
         this.loading=false;
        this.isLoading = false;
      } else {
        this.$toast(res.msg);
      }
    },
    //下拉刷新
    onRefresh() {
      this.getInitDataList();
    },
    onLoad() {
      if (this.initData.list && this.initData.list.length > 0) {
        this.getInitDataList();
      }
    }
  }
};
</script>

<style scoped>
.header {
  width: 100%;
}
.recordDetails_con {
  width: 100%;
  margin-top: 0.57rem;
}
.recordDetails_con ul li {
  margin: 0.16rem;
  background-color: #fff;
  border-radius: 0.1rem;
}
.recordDetails_con_head {
  line-height: 0.45rem;
  overflow: hidden;
  border-bottom: 1px solid #f7f7f7;
  width: 90%;
  margin: 0 auto;
}
.recordDetails_con_head h4 {
  float: left;
  font-size: 0.15rem;
  color: #000;
  font-weight: 600;
  width: 40%;
}
.recordDetails_con_head_span {
  color: #f44736;
  font-weight: 500;
  width: 30%;
  float: left;
  font-size: 0.11rem;
}
.recordDetails_con_head_span1 {
  color: #000;
  float: right;
  width: 25%;
  font-size: 0.11rem;
}
.recordDetails_con_foot {
  width: 90%;
  margin: 0 auto;
  padding: 0.15rem 0;
}
.recordDetails_con_foot_title {
  color: #808080 !important;
  line-height: 0.3rem !important;
}
.recordDetails_con_foot p {
  font-size: 0.13rem;
  color: #000;
  line-height: 0.2rem;
}
</style>
